<template>
  <div>
    <header class="spacer">
      <span
        :class="{ 'is-active': isActive == item }"
        v-for="item in activeList"
        :key="item"
        @click="activeChange(item)"
        >{{ item }}</span
      >
    </header>
    <main>
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="跟单人员" width="180">
        </el-table-column>
        <el-table-column prop="name" label="已跟踪" width="180">
        </el-table-column>
        <el-table-column prop="name" label="已接通并留言"> </el-table-column>
        <el-table-column prop="name" label="已接通未留言"> </el-table-column>
        <el-table-column prop="name" label="未接通已留言"> </el-table-column>
        <el-table-column prop="name" label="未接通未留言"> </el-table-column>
        <el-table-column prop="name" label="只留言未拨打"> </el-table-column>
        <el-table-column prop="name" label="只操作"> </el-table-column>
      </el-table>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeList: ["派单", "跟单"],
      isActive: "派单",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  methods: {
    /**
     * 切换 派单/跟单
     * @param val
     */
    activeChange(val) {
      if (this.isActive == val) return;
      this.isActive = val;
    }
  }
};
</script>

<style lang="scss" scoped>
$defaultBgColor: #f4f4f4;
$defaultColor: #999999;
.spacer {
  span {
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
    background-color: $defaultBgColor;
    color: $defaultColor;
    cursor: pointer;

    &.is-active {
      color: white;
      background-color: var(--color-primary);
    }
    &:not(:last-child) {
      margin-right: 14px;
    }
  }
}

main {
  margin-top: 10px;
}
</style>
